<template>
	<view v-if="show" class="i-class i-noticebar" style="color: {{ color }}; background-color: {{ backgroundcolor }}">
	    <i-icon v-if="icon" :type="icon" size="24" :color="color" class="i-noticebar-icon"></i-icon>
	    <view class="i-noticebar-content-wrap">
	        <view class="i-noticebar-content {{loop?'i-noticebar-content-loop':''}}" animation="{{ animationData }}">
	           <slot></slot>
	        </view>
	    </view>
	    <i-icon v-if="closable" class="i-noticebar-operation" type="close" size="20" :color="color" bindtap="handleClose"></i-icon>
	</view>
</template>

<script>
	export default {
        props: {
            closable: {
                type: Boolean,
                default: false
            },
            icon: {
                type: String,
                default: ''
            },
            loop: {
                type: Boolean,
                default: false
            },
            // 背景颜色
            backgroundcolor: {
                type: String,
                default: '#fefcec'
            },
            // 字体及图标颜色
            color: {
                type: String,
                default: '#f76a24'
            },
            // 滚动速度
            speed: {
                type: Number,
                default: 1000
            }
        },
		data() {
			return {
				show: true,
				wrapWidth: 0,
				width: 0,
				duration: 0,
				animation: null,
				timer: null,
			};
		}
	}
</script>

<style>

</style>
